<template>
  <view>
    <uni-list>
      <question-item 
        v-for="item in datalist"
        :key="item.qid"
        :data="item"
      />
    </uni-list>
    <text-toast-bar
      :is-null="questionNum === 0"
      :load-more="start !== questionNum"
      :no-more="start === questionNum"
    />
  </view>
</template>

<script>
import questionItem from './questionItem.vue'
import textToastBar from '@/components/textToastBar.vue'

import { getHotQuestionNum, getHotQuestionList } from '@/common/api/question.js'
export default {
  components: {
    questionItem,
    textToastBar
  },
  data() {
    return {
      datalist: [],
      questionNum: 0,
      start: 0
    }
  },
  mounted() {
    getHotQuestionNum()
      .then(res => {
        this.questionNum = res
        this.getMore()
      }) 
  },
  onReachBottom() {
    this.getMore()
  },
  methods: {
    getMore() {
      if (this.start !== this.questionNum) {
        getHotQuestionList(this.start, this.start + 10)
          .then(res => {
            this.datalist = [...this.datalist, ...res]
            this.start = (this.start + 10) >= this.questionNum ? this.questionNum : this.start + 10
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
	.content{
		min-height: 100%;
		background: gray;
	}
</style>
